<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
-->
<!-- 
* @desc:用户管理
* @fileName:User.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-4-7
!-->
<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
import UserSearch from "./components/user-search.vue";
import UserDetails from "./components/user-details.vue";
import UserPagination from "@/components/common/pagination.vue";
import OperationDialog from "./components/Operation.vue";
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any;

const listData = reactive({
  // 列表数据
  tableData: [],
  // 列表总数
  total: 0,
  // 列表加载动画
  isListLoading: false,
  // 查询加载动画
  isSearchLoading: false,
  // 弹窗标识
  opDialog: false,
  // 修改用户所存当前行数据
  oneUserInfo: {},
});

/**
 * 定义请求数据
 */
let reqData = {
  nickName: "",
  userName: "",
  page: 1,
};

/**
 * 获取列表
 * @reture viod
 */
const reqTableList = () => {
  listData.isListLoading = true;
  const res = proxy.$HTTP.post({
    url: `/manager/query`,
    // params: {
    //   page: reqData.page,
    //   size: 10,
    // },
    data: {
      userName: reqData.userName,
    },
  });
  res.then((res: any) => {
    if (res.isOk) {
      listData.tableData = res.data.records;
      listData.total = Number(res.data.total);
    }
    listData.isListLoading = false;
    listData.isSearchLoading = false;
  });
};

/**
 * 查询方法
 * @param filter 查询条件对象
 * @reture viod
 */
const searchFunc = (filter: any) => {
  listData.isSearchLoading = true;
  reqData.nickName = filter.userValue;
  reqData.userName = filter.userValue;
  reqTableList();
};

/**
 * 根据页码跳转页面
 * @param pageNumber 页码
 * @reture viod
 */
const getCurrentPageNumber = (pageNumber: number) => {
  reqData.page = pageNumber;
  reqTableList();
};

/**
 * 打开新增弹窗
 * @reture viod
 */
const dialogControlFunc = () => {
  listData.opDialog = true;
};

/**
 * 新增用户
 * @param userInfo 新增用户的信息
 * @reture viod
 */
const saveUser = (userInfo: any) => {
  const res = proxy.$HTTP.post({
    url: `/manager`,
    data: userInfo,
  });
  res.then((res: any) => {
    if (res.code === 200) {
      ElMessage({
        message: "保存成功！",
        type: "success",
      });
      listData.opDialog = false;
      reqTableList();
    } else {
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
};

/**
 * 删除用户
 * @param id 用户ID
 * @reture viod
 */
const delUser = (id: string) => {
  const res = proxy.$HTTP.delete({
    url: `/manager/` + id,
  });
  res.then((res: any) => {
    if (res.code === 200) {
      ElMessage({
        message: "删除成功！",
        type: "success",
      });
      listData.opDialog = false;
      reqTableList();
    } else {
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
};

onMounted(() => {
  // 初始化列表数据
  reqTableList();
});
</script>

<template>
  <div class="page-list">
    <!-- 表单 -->
    <div class="page-table">
      <!-- 查询 -->
      <user-search
        :searchFunc="searchFunc"
        :isSearchLoading="listData.isSearchLoading"
        :dialogControlFunc="dialogControlFunc"
      ></user-search>
      <!-- 列表详情 -->
      <user-details
        :delUser="delUser"
        dialogEditFunc="新增"
        :tableData="listData.tableData"
        :isListLoading="listData.isListLoading"
      ></user-details>
      <!-- 分页 -->
      <user-pagination
        :total="listData.total"
        :getCurrentPageNumber="getCurrentPageNumber"
      ></user-pagination>
    </div>
  </div>
  <!-- 新增弹窗 -->
  <el-dialog
    v-model="listData.opDialog"
    v-if="listData.opDialog"
    :width="740"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <operation-dialog
      :saveUser="saveUser"
      :oneUserInfo="listData.oneUserInfo"
    />
  </el-dialog>
</template>

<style lang="scss" scoped>
.page-list {
  background-color: #fff;
  position: relative;
  padding: 15px;
  height: calc(100vh - 130px);
}
</style>
